<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <script src="js/vue.js"></script>
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <script src="js/jquerysession.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }
        .search-box {
            height: 48px;
        }
        .input-group-addon {
            background-color:#E94F4C;
            border: none;
            color: #ffffff;
        }
        .control-icon {
            position: absolute;
            top: 50%;
        }
        .mgt38 {
            margin-top: 30px;
        }
        .thumbnail a img {
            height: 200px;
            width: 200px;
        }
        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }
        a:hover {
            text-decoration: none;
        }
        h3, p {
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid" id="top_show">
        <div class="navbar-header">
            <a href="index.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
        </div>
        <p class="navbar-text navbar-right login-text" v-if="showName">
            <a id="loginName" href="/goToCart"></a>
        </p>
        <p class="navbar-text navbar-right login-text" v-if="showName">
            <a id="outLogin" href="/" onclick="outLogin()" >登出</a>
        </p>
        <p class="navbar-text navbar-right login-text" v-if="showLogin">
            <a id="loginText" href="login.html">登录</a>
        </p>
        <p class="navbar-text navbar-right" v-if="showLogin">
            <a href="register.html">注册</a>
        </p>
        <p class="navbar-text navbar-right">
            <a onclick="gotoOrder()" href="#">我的订单</a>
        </p>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-1 search-box">
            <a href="#" class="logo">
                <i class="fa fa-sign-language"></i>
            </a>
        </div>
        <div class="col-xs-9 search-box">
            <div class="input-group search-box">
                <input class="form-control search-box">
                <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
            </div>
        </div>
        <div class="col-xs-2 search-box">
            <a href="/goToCart" class="btn btn-danger btn-block search-box">
                <i class="fa fa-cart-arrow-down" style="font-size: 20px;"></i>&nbsp;&nbsp;购物车
                <!-- 购物车数据的数量 -->
                <span id="shoppingCartNum" class="badge"></span>
            </a>
        </div>
    </div>
    <div class="row">
        <div id="carousel-example" class="carousel slide mgt38" data-ride="carousel">
            <!-- 小圆点 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example" data-slide-to="1"></li>
                <li data-target="#carousel-example" data-slide-to="2"></li>
                <li data-target="#carousel-example" data-slide-to="4"></li>
            </ol>

            <!-- 放置图片 -->
            <div class="carousel-inner">

                <!-- 展示每张图片以及文字 -->
                <div class="item active">
                    <img src="images/banner1.webp">
                </div>
                <div class="item">
                    <img src="images/banner2.webp">
                </div>
                <div class="item">
                    <img src="images/banner3.webp">
                </div>
                <div class="item">
                    <img src="images/banner4.jpg">
                </div>
            </div>

            <!-- 左边的箭头 -->
            <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                <span class="fa fa-chevron-left control-icon"></span>
                <span class="sr-only">Previous</span>
            </a>
            <!-- 右边的箭头 -->
            <a class="right carousel-control" href="#carousel-example" data-slide="next">
                <span class="fa fa-chevron-right control-icon"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <!--商品列表-->
    <div class="row mgt38" id="goodsListInfo">

        <!--商品-->
        <div class="col-xs-3" v-for="g in goodList">
            <div class="thumbnail">
                <a href="javascript: void(0);">
                    <img :src="'http://10.3.140.185/'+g.img" >
                    <div class="caption">
                        <p class="description">
                            {{g.title}}
                        </p>
                        <p>
                            价格：￥{{g.price}}
                        </p>
                        <p>
                            <button onclick="addToShoppingCart(this)" class="btn btn-danger">加入购物车</button>
                        </p>
                        <p hidden="hidden">
                            {{g.gid}}
                        </p>
                    </div>
                </a>
            </div>
        </div>

    </div>
</div>
</body>
<script>


    var uName = "";
    var uId = 0;
    $(function () {

        /**
         * 获取后端session数据
         * uName：用户名
         * uId：用户ID
         */
        $.ajax({
            url: 'getLoginInfo',
            type: 'GET',
            dataType: 'JSON',
            success: function (data) {
                console.log(data)
                uName = data['uName'];
                uId = data['uId'];

                showName()
                $('#loginName').text("欢迎您:"+uName)
                getCartNum()
            }
        })
    })


    /**
     *动态显示“登录注册” 和 “用户名” 方法
     */
    function showName(){
        // alert("登录用户："+uName+",id:"+uId)//todo 可删除注释
        if (uName==""||uName==null||uId==0){
            var vm1 = new Vue({
                el: '#top_show',
                data: {
                    showName:false,
                    showLogin:true
                }
            })
        }else {
            var vm1 = new Vue({
                el: '#top_show',
                data: {
                    showName:true,
                    showLogin:false
                }
            })
        }
    }


    /**
     * 用于页面展示所有商品的ajax请求方法
     */
    var vm = new Vue({
        el: '#goodsListInfo',
        data: {
            goodList: []
        }
    })
    $.ajax({
        url: '/selectAllGoods',
        type: 'GET',
        dataType: 'JSON',
        success: function (data) {
            //遍历JSon
            for (var i=0;i<data.length;i++){
                var goods = data[i];//获取单条对象
                var gid = goods.goodsId;  //获取id
                var itemId = goods.itemId;//商品类别
                var title = goods.title;  //商品标题
                var img = goods.smallPic; //商品图片
                var price = goods.price;  //商品价格

                vm.goodList.push({
                    gid: gid,
                    img: img,
                    itemId: itemId,
                    title: title,
                    price: price
                })
            }
            console.log(vm.goodList)
        }
    })

    function outLogin() {
        $.ajax({
            url: '/front/outLogin',
            type: 'GET',
            dataType: 'TEXT',
            success: function (data) {

            }
        })
    }


    /**
     * 添加到购物车-动作-方法
     *
     *      登录标记（session）：loginFlag
     * @param msgText
     */
    function addToShoppingCart(b) {
        //获取添加商品的商品ID
        var goodsId = $(b).parent().siblings()[2].innerHTML;

        var loginState =false;

        //获取登录状态
        if(uName==""||uName==null){
            loginState=false
        }else if (uName!=""||uName!=null){
            loginState=true
        }

        if (loginState){
            //已登录操作
            $.ajax({
                url: '/inLoginAddCart',
                type: 'GET',
                data: {goodsId:goodsId,uId:uId},
                dataType: 'JSON',
                success: function (data) {

                }
            })
            getCartNum()
        }else if (!loginState){
            //未登录操作
            $.ajax({
                url: '/noLoginAddCart',
                type: 'GET',
                data: {goodsId:goodsId},
                dataType: 'JSON',
                success: function (data) {

                }
            })
            localStorage.setItem("goods",goodsId)
            getCartNum()
        }
    }


    /**
     * 显示购物车图标数量的方法
     */
    function getCartNum() {
        $.ajax({
            async : true,  //同步请求
            url: '/selectCartNum',
            type: 'GET',
            dataType: 'TEXT',
            success: function (data) {
                loadNum(data)
/*                console.log(data)
                $('#shoppingCartNum').html(function () {
                    $('#shoppingCartNum').text(data['num'])
                })*/
            }
        })
    }


    function loadNum(res) {
        $('#shoppingCartNum').text(res)
    }



    function gotoOrder() {
        if (uName==null||uName==""||uId==null||uId==0){
            alert("还未登录，请登录后查看")
            window.location.href="login.html"
        } else {
            window.location.href="showOrder"
        }
    }


    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

</script>
</html>